<template>
  <el-dialog
    :title="title"
    :visible.sync="innerVisible"
    width="600px"
    @close="handleCancel"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="180px"
    >
      <el-form-item
        label="机构/平台名称"
        prop="platformName"
      >
        <el-input
          v-model="form.platformName"
          placeholder="请输入"
          :disabled="isDetail"
        />
      </el-form-item>

      <el-form-item label="所属类型">
        <el-select
          placeholder="请选择"
          v-model="form.type"
          clearable
          :disabled="isDetail"
        >
          <el-option
            v-for="item in civilTypeOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="应用领域">
        <el-select
          placeholder="请选择"
          v-model="form.applicationArea"
          clearable
          :disabled="isDetail"
        >
          <el-option
            v-for="item in scienceFieldOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="建设面积(万平方米)">
        <el-input
          v-model="form.buildArea"
          placeholder="请输入"
          :disabled="isDetail"
        />
      </el-form-item>

      <el-form-item label="牵头单位">
        <el-input
          v-model="form.leadUnit"
          placeholder="请输入"
          :disabled="isDetail"
        />
      </el-form-item>

      <el-form-item label="联系人及方式">
        <el-input
          v-model="form.contract"
          placeholder="请输入"
          :disabled="isDetail"
        />
      </el-form-item>

      <el-form-item label="图片上传">
        <el-upload
          class="upload-image"
          action=""
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleChangeImage"
          :on-remove="handleRemoveImage"
          :on-preview="handlePreviewImage"
          :show-file-list="true"
          :file-list="fileList"
          v-if="!isDetail"
          multiple
          accept="image/*"
        >
          <i class="el-icon-plus"></i>
        </el-upload>

        <el-dialog
          :visible.sync="previewVisible"
          width="50%"
          v-if="!isDetail"
        >
          <img
            :src="previewImage"
            alt="预览"
            style="width: 100%"
          />
        </el-dialog>
        <el-image
          v-for="item in fileList"
          :preview-src-list="previewImageList"
          v-if="isDetail"
          :key="item.url"
          :src="item.url"
          class="image"
        >
        </el-image>
      </el-form-item>
    </el-form>

    <div
      slot="footer"
      class="dialog-footer"
      v-if="!isDetail"
    >
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  industryPlatTypeOptions,
  constructionStatusOptions
} from '@/utils/project/data'
import {
  civilTypeOptions,
  scienceFieldOptions
} from '@/utils/project/data'
import { STATIC_FILE_URL } from '@/api/config.js'

export default {
  name: 'ProgressDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '填写信息'
    },
    isDetail: {
      type: Boolean
    },
    currentData: {
      type: Object
    }
  },
  data() {
    return {
      form: {
        pkid: '',
        platformName: '',
        type: '',
        applicationArea: '',
        buildArea: '',
        leadUnit: '',
        contract: ''
      },
      rules: {
        platformName: [
          {
            required: true,
            message: '请输入机构/平台名称',
            trigger: 'blur'
          }
        ]
      },
      innerVisible: false,
      uploadFileList: [],
      previewImage: '',
      previewVisible: false,
      previewImageList: [],
      fileList: []
    }
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
    innerVisible(val) {
      this.$emit('update:visible', val)
    },
    currentData(val) {
      this.form = val
      this.fileList = []
      this.uploadFileList = []
      this.previewImageList = []
      this.previewImage = ''
      this.previewVisible = false
      if (
        val.resourceFileInfos &&
        val.resourceFileInfos.length
      ) {
        this.fileList = val.resourceFileInfos.map(
          (item) => {
            return {
              ...item,
              url: `${STATIC_FILE_URL}${item.filePath}`
            }
          }
        )

        if (this.isDetail) {
          this.previewImageList = this.fileList.map(
            (item) => item.url
          )
        }

        this.uploadFileList = JSON.parse(
          JSON.stringify(this.fileList)
        )
      }
    }
  },
  computed: {
    industryPlatTypeOptions() {
      return industryPlatTypeOptions
    },
    constructionStatusOptions() {
      return constructionStatusOptions
    },
    civilTypeOptions() {
      return civilTypeOptions
    },
    scienceFieldOptions() {
      return scienceFieldOptions
    }
  },
  methods: {
    handleRemoveImage(file) {
      file.name
        ? (this.uploadFileList = this.uploadFileList.filter(
            (i) => i.name !== file.name
          ))
        : (this.uploadFileList = this.uploadFileList.filter(
            (i) => i.url !== file.url
          ))
    },

    handleChangeImage(file) {
      this.uploadFileList.push(file.raw)
    },

    handlePreviewImage(file) {
      if (file.url) {
        this.previewImage = file.url
      } else if (file.raw) {
        this.previewImage = URL.createObjectURL(file.raw)
      }
      this.previewVisible = true
    },

    handleCancel() {
      this.$emit('update:visible', false)
    },

    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit(
            'confirm',
            this.form,
            this.uploadFileList
          )
          this.handleCancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/dialog.scss';
::v-deep .el-input__inner {
  width: 280px !important;
}

::v-deep .el-upload-list__item-status-label {
  display: none !important;
}

.image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
